<template>
	<div class="swiper" ref="ref">
		<div class="swiper-wrapper">
			<slot></slot>
		</div>
	</div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.css';

	export default {
		data() {
			var dom = new Date().getTime() + '_' + Math.ceil(Math.random() * 9999)
			return {
				swiper:null,
				ref: dom
			}
		},
		methods:{
			slideTo(i){
				this.swiper.slideTo(i)
			}
		},
		mounted() {
			const that = this
			var dom = this.$refs['ref']
			this.swiper = new Swiper(dom, {
				on:{
					slideChangeTransitionStart:function(){
						that.$emit('change',this.activeIndex)
					}
				}
			});
		}
	}
</script>

<style scoped>
	.swiper {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
</style>